/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="addPlan">新建巡检任务</el-button>
      </el-form-item>
      <el-form-item label="巡检名称：">
        <el-input v-model="formInline.taskName" placeholder="请输入巡检名称"></el-input>
      </el-form-item>
      <el-form-item label="开始时间：">
        <el-date-picker
          v-model="formInline.startTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          class="curveDate"
          style="width: 400px"
          ref="datePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务状态：">
        <el-select
          v-model="formInline.status"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="tableRef" :data="tableData" style="width: 100%;height: 100%;" :header-cell-style="{background:'#006175',color:'#fff'}" @expand-change="expandChange"
              :row-class-name="tableRowClassName">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column type="expand" width="50">
        <template v-slot="scope">
          <el-table :data="scope.row.tableDataExpansion" style="width: 100%" :show-header="false" :row-class-name="tableRowClassNameChild">
            <el-table-column label="序号" width="50"></el-table-column>
            <el-table-column width="50px"></el-table-column>
            <el-table-column prop="taskName" label="巡检名称" width="120"></el-table-column>
            <el-table-column prop="stationName" label="场站名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="patrolPlanName" label="巡检方案"></el-table-column>
            <el-table-column prop="startTime" label="开始日期" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="currentCycle" label="频率" width="50px"></el-table-column>
            <el-table-column prop="status" label="任务状态" width="100px" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" width="300px">
              <template v-slot="scope">
                <el-button :class="scope.row.status==0?'common-btn':'btn'" class="common-btn" @click="scope.row.status==0?getEditor(scope.row):''">编辑</el-button>
                <el-button :class="scope.row.status==0?'delete-btn':'btn'" @click="scope.row.status==0?getWatch(scope.row):''">查看监控</el-button>
                <el-button :class="scope.row.status==1?'common-btn':'btn'" @click="getWatchPort(scope.row)">查看报告</el-button>
                <el-button :class="scope.row.status==1?'btn':'success-btn'" @click="scope.row.status==0?getExecute(scope.row):''">确认执行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="巡检名称" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stationName" label="场站名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="patrolPlanName" label="巡检方案" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="startTime" label="开始日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="endTime" label="结束时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="currentCycle" label="频率" width="50px"></el-table-column>
      <el-table-column prop="status" label="任务状态" width="100px">
        <template v-slot="scope">
          <span :style="{color:color[scope.row.status]}">
            {{ status[scope.row.status] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template v-slot="scope">
          <el-button class="delete-btn" @click="getDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="pagination.pageSize"
      layout="total, sizes, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
    <addTimeDialog v-if="DialogComponentShow" :DialogComponentShow="DialogComponentShow" @closeDialog="closeDialog" :row="row"></addTimeDialog>
    <addPlanDialog v-if="DialogPatrolShow" :DialogPatrolShow="DialogPatrolShow" @closeDialog="closeDialogPatrol" :title="title" :row="row"></addPlanDialog>
    <videoDialog v-if="DialogVideo" :DialogVideo="DialogVideo" @closeDialog="closeDialogVideo" :row="row"></videoDialog>
    <reportDialog v-if="reportDialog" :DialogVideo="reportDialog" @closeDialog="closeDialogReport" :row="row"></reportDialog>
    <button @click="getRowsOpen">anniu</button>
  </div>
</template>

<script>
import {tableRowClassName, tableRowClassNameChild} from '../../components/tableStyle';
import addTimeDialog from "./addTimeDialog";
import addPlanDialog from "./addPlanDialog";
import videoDialog from "./videoDialog";
import reportDialog from "./reportDialog";
import {patrol, plan} from "../../api/inspection/apiUntil";

export default {
  components: {
    addTimeDialog,
    addPlanDialog,
    videoDialog,
    reportDialog
  },
  data() {
    return {
      rows: '',
      option: [],
      tableData: [],
      tableDataExpansion: [],
      tableRowClassName,
      tableRowClassNameChild,
      title: '',
      titlePatrol: '',
      status: {
        0: '等待执行',
        1: '执行中',
        2: '已执行'
      },
      statusChild: {
        0: '等待执行',
        1: '已执行',
      },
      statusChildColor: {
        0: '#0ACC00',
        1: '#454545',
      },
      color: {
        0: '#0ACC00',
        1: '#FF8D1A',
        2: '#454545'
      },
      row: '',
      formInline: {
        taskName: '',
        startTime: '',
        status: ''
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      DialogComponentShow: false,
      DialogPatrolShow: false,
      DialogVideo: false,
      reportDialog: false,
      optionsList: [
        {
          name: '等待执行',
          value: '0'
        },
        {
          name: '执行中',
          value: '1'
        },
        {
          name: '已结束',
          value: '2'
        }
      ],
    };
  },
  mounted() {
    this.getInit()
    // this.tableData.forEach(val => {
    //   this.$set(val, "expanded", false);
    // });
  },
  methods: {
    cancel() {
      this.DialogPatrolShow = false
      this.DialogComponentShow = false
      this.DialogVideo = false
      this.reportDialog = false
    },
    _getPlanOpen(row, title) {
      this.title = title
      this.DialogPatrolShow = true
      this.row = row
    },
    //新增任务
    addPlan() {
      this._getPlanOpen()
    },
    //子类编辑
    getEditor(row) {
      this.DialogComponentShow = true
      this.row = row
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.getInit()

    },
    // 实时监控
    getWatch(row) {
      this.DialogVideo = true
      this.row = row
    },
    getWatchPort(row) {
      if (row.status == 0) {
        this.$confirm('如您已完成巡检任务，需点击确认执行方可产生巡检报告', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        });
      } else {
        this.reportDialog = true
        this.row = row
      }

    },
    getExecute(row) {
      this.$confirm('确认任务已执行完毕！且无法更改！\n' +
        '并上传已编辑的告警信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          taskId: row.taskId,
          taskCurrentId: row.id
        }
        patrol.getPatrolReport(params).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: '执行成功',
              type: 'success'
            });
            this.getInit()
          } else {
            this.$message({
              message: '执行失败',
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消执行'
        });
      });
    },
    expandChange(item, row) {
      // console.log(item,row)
      this.rows = item
      let params = {
        id: item.id
      }
      plan.getPlanQueryCurrent(params).then((res) => {
        if (res) {
          this.tableData.forEach(el => {
            if (item.id == el.id) {
              this.$set(item, 'tableDataExpansion', res.data)
              item.tableDataExpansion.forEach((_el) => {
                this.$set(_el, 'patrolPlanName', item.patrolPlanName)
              })
            }
          })
        }
      })
    },
    getDelete(row) {
      this.$confirm('是否删除任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        }
        plan.getTaskDelete(params).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getInit()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getRowsOpen() {
      this.getInit()
    },
    //关闭弹框
    closeDialog() {
      this.DialogComponentShow = false
      this.getRowsOpen()
    },
    //关闭弹框
    closeDialogPatrol() {
      this.DialogPatrolShow = false
      this.getRowsOpen()
    },
    //关闭弹框
    closeDialogVideo() {
      this.DialogVideo = false
      this.getRowsOpen()
    },
    //关闭弹框
    closeDialogReport() {
      this.reportDialog = false

    },
    //列表
    getInit() {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        taskName: this.formInline.taskName,
        endTime: this.formInline.startTime[1],
        beginTime: this.formInline.startTime[0],
        status: this.formInline.status
      }
      plan.getPlanQuery(params).then((res) => {
        if (res) {
          this.tableData = res.data || []
          this.tableData.map((item) => {
            this.$set(item, 'tableDataExpansion', [])
          })
          this.pagination.total = res.total
        }
      })
      // console.log(this.rows, this.$refs.tableRef.toggleRowExpansion)
      this.$nextTick(() => {
        // console.log(this.rows,this.tableData)
        if (this.rows) {
          let a = this.tableData.find((item) => {
            return item.id === this.rows.id
          })
          // console.log(this.rows, a, 'mmmmmm')
          this.$refs.tableRef.toggleRowExpansion(a, true)
        }
      })
    },
    onSubmit() {
      this.getInit()
    },
    //手动清空
    reset() {
      this.formInline.taskName = ''
      this.formInline.startTime = undefined
      this.formInline.status = ''
      this.getInit()
    },
  },
  watch: {
    'formInline.startTime': {
      handler(val) {
        if (!val) {
          this.$refs.datePicker.showPicker();
          this.formInline.startTime = []
        }
      },
      deep: true
    }
  }
};

</script>

<style scoped>
>>> .el-table {
  margin-top: 0 !important;
}

:deep (.el-button--text) {
  width: 60px !important;
}
</style>
<style>
.curveDate .el-picker-panel__footer {
  border: 1px solid red !important;
}
</style>
